<template>
  <div class="fund">
    <!-- 轮播页面 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in swipeImg" :key="index">
        <img :src="image.icon_url" width="100%" />
      </van-swipe-item>
    </van-swipe>
    <!-- 轮播页面END -->

    <!-- tablist -->
    <van-tabs type="card">
      <van-tab v-for="(tab, i) in tabs" :key="i" :title="tab.tab_name">
        <div class="tab-desc">
          <h6>{{ tab.comment }}</h6>
          <p>{{ tab.tips }}</p>
        </div>
        <van-cell-group inset>
          <van-cell v-for="(k, index) in tab.items" :key="index">
            <van-image
              width="1.5rem"
              height="1.5rem"
              lazy-load
              :src="k.img_src"
            />
            <span class="fund-name">{{ k.name }}</span>
            <span class="fund-pe">
              <span class="value">{{ k.content[0].value }}</span>
              <span class="desc">{{ k.content[0].desc }}</span>
            </span>
            <span class="fund-roe">
              <span class="value">{{ k.content[1].value }}</span>
              <span class="desc">{{ k.content[1].desc }}</span>
            </span>
          </van-cell>
        </van-cell-group>
      </van-tab>
    </van-tabs>
    <!-- tablistEND -->
  </div>
</template>

<script>
import * as api from "@/api/index";
export default {
  data() {
    return {
      swipeImg: [],
      tabs: [],
    };
  },
  async mounted() {
    // {  // 老陈说这样写两个await会导致有先后顺序的问题，要用以下两种写法
    //   let res = await api.getFundBanner();
    //   this.swipeImg = res.data.items;
    //   // console.log(res);
    //   let resTab = await api.getFundTablist();
    //   console.log(resTab);
    // }
    // q1
    api.getFundBanner().then((res) => {
      this.swipeImg = res.data.items;
    });
    // q2
    (async () => {
      let res = await api.getFundTablist();
      this.tabs = res.data.tab;
      //   console.log(res);
    })();
  },
};
</script>

<style lang="less" scoped>
.fund {
  .tab-desc {
    text-align: left;
    h6 {
      margin: 0.3rem;
      font-size: 0.3rem;
      color: orangered;
    }
    p {
      margin: 0.3rem;
      font-size: 0.3rem;
      color: #bbb;
    }
  }
  .van-cell__value {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    .fund-pe,
    .fund-roe {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  /deep/ .van-image img {
    width: 1.5rem;
    height: 1.5rem;
  }
}
</style>
